<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/core.css"/>
		<link rel="stylesheet" type="text/css" href="vendor/animate.css"/>
		<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>

	<body>
		<header class="header">
				<div class="top" id="top">
					<div class="content">		
						<div class="left">
							<div class="all-menu">
								<a href="#"></a>
								<div class="sub-menu">
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Not Found</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Search Results</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Skills</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											
										</ul>
									</div>
								</div>
							</div>
							<div class="logo">
								<a href="#">
									<span class="icon"></span>
									<span class="globals"></span>
								</a>
							</div>
						</div>
						<div class="nav">
							<ul>
								<li><a href="index.html" >Home</a></li>
								<li class="pages">
									<a href="pages.html"  class="current">Pages</a>
									<ul class="sub-nav">
										<li><a href="about-us.html">About Us</a></li>
										<li><a href="vancancies-details.html">Vacancies Details</a></li>
										<li><a href="blog-details.html">Blog Details</a></li>
									</ul>
								</li>
								<li  class="pages">
									<a href="portfolio.html">Portfolio</a>
									<ul class="sub-nav">
										<li><a href="masonry-four.html">Masonry Four</a></li>
										<li><a href="masonry-three.html">Masonry Three</a></li>
										<li><a href="grid_three.html">Grid Three</a></li>
										<li><a href="grid-masonry-three.html">Grid Masonry Three</a></li>
										<li><a href="landscape.html">Landscape</a></li>
										<li><a href="gallery.html">Gallery</a></li>
									</ul>
								</li>
								<li><a href="vacancies.html">Vacancies</a>
								</li>
								<li><a href="blog.html">Blog</a></li>
								<li><a href="cantact.html">Contacts</a></li>
							</ul>
						</div>
						<div class="right">
							<span></span>
							<ul class="sub-nav">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Vacancies</a></li>
								<li><a href="#">FAQ</a></li>
								<li><a href="#">Pricing Table</a></li>
								<li><a href="#">Our Team</a></li>	
							</ul>
						</div>
					</div>
					
				</div>
		<!-------移动端导航------->
				<div class="menu-list" id="menu-list">
					<div class="item">
						<ul class="item-menu">
							<li class="home" id="home"></li>
							<li class="more"></li>
							<li class="logo"></li>
						</ul>
						<ul id="sub-menu">
							<li><a href="index.html">Home</a></li>
							<li><a href="pages.html">pages</a></li>
							<li><a href="portfolio.html">Portfolio</a></li>
							<li><a href="vacancies.html">Vacancies</a></li>	
							<li><a href="blog.html">Blog</a></li>
							<li><a href="cantact.html">Contacts</a></li>
						</ul>
					</div>
				</div>
				
				<div class="bottom" id="bottom">
					<div class="inner">
						<div class="left">
							<a href="#">Home</a>
							<span>/</span>
							<a href="#">pages</a>
							<span>/</span>
							<a href="#" class="current">Dropdown Menu Style</a>
						</div>
						<div class="right">
							<div class="message">
								<a href="#">+</a>
								<div class="send">
									<span><i></i>Send a Message</span>
								</div>
							</div>
						</div>
					</div>
				</div>
		</header>


		<section class="pages-container">
			<div class="contant">
				<h1>Hi there!Welecome to Globals.</h1>
				<h2>We are professional Development Team.</h2>
				<p class="article">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.</p>
				<a href="" class="btn">Contact Us</a>
			</div>
			<div class="adv">
				<div class="grid">
					<ul>
						<li class="group">
							<div class="group-item">
								<div class="thum">
									<a href=""><img src="img/pages_m.png"/></a>
								</div>
								<div class="meta">
									<div class="jumbotron">
										<h1 class="glow in tlt">QARO - Flat PSD Template</h1>
										<p class="tlt" data-in-effect="bounceInDown">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
									</div>
								</div>
								<div class="circle"><i></i></div>
							</div>
						</li>
						<li class="group">
							<div class="group-item" id="group-item">
								<div class="thum">
									<a href=""><img src="img/pages_m.png"/></a>
								</div>
								<div class="meta">
									<div class="jumbotron">
										<h1 class="glow in tlt">QARO - Flat PSD Template</h1>
										<p class="tlt" data-in-effect="bounceInDown">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
									</div>
								</div>
								<div class="circle">
									<i></i>
								</div>
							</div>
						</li>
						<li class="group">
							<div class="group-item" id="group">
								<div class="thum">
										<a href=""><img src="img/pages_m.png"/></a>
								</div>
								<div class="meta">
									<div class="jumbotron">
										<h1 class="glow in tlt">QARO - Flat PSD Template</h1>
										<p class="tlt" data-in-effect="bounceInDown">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
									</div>
								</div>
								<div class="circle">
									<i></i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="about">
				<div class="wrapper">
					<h1>Meet Our Professional Team</h1>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
					<p>euismod tincidunt ut laoreet dolore magna aliquam. </p>
					<div class="row clearfix">
						<div class="column">
							<div class="about-item">
								<i class="one"></i>
								<div class="user-card">
									<div class="card-box">
										<h2>Founder</h2>
										<p>Kenneth Hanson</p>
										<div class="share">
											<i class="shareone"></i>
										</div>
										<span class="out"></span>
										<span class="in"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="about-item">
								<i class="two"></i>
								<div class="user-card">
									<div class="card-box">
										<h2>Founder</h2>
										<p>Kenneth Hanson</p>
										<div class="share">
											<i class="sharetwo"></i>
										</div>
										<span class="out"></span>
										<span class="in"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="about-item">
								<i class="three"></i>
								<div class="user-card">
									<div class="card-box">
										<h2>Founder</h2>
										<p>Kenneth Hanson</p>
										<div class="share">
											<i class="sharethree" ></i>
										</div>
										<span class="out"></span>
										<span class="in"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="about-item">
								<i class="four"></i>
								<div class="user-card">
									<div class="card-box">
										<h2>Founder</h2>
										<p>Kenneth Hanson</p>
										<div class="share">
											<i class="sharefour"></i>
										</div>
										<span class="out"></span>
										<span class="in"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="about-item">
								<i class="five"></i>
								<div class="user-card">
									<div class="card-box">
										<h2>Founder</h2>
										<p>Kenneth Hanson</p>
										<div class="share">
											<i class="sharefive"></i>
										</div>
										<span class="out"></span>
										<span class="in"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="about-item">
								<i class="six"></i>
								<div class="user-card">
									<div class="card-box">
										<h2>Founder</h2>
										<p>Kenneth Hanson</p>
										<div class="share">
											<i class="sharesix"></i>
										</div>
										<span class="out"></span>
										<span class="in"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!------------------------->
			<div class="carousel">
				<div class="list">
					<div class="item-all">
						<div class="item">
							<div class="carousel-count" id="carousel-count">
								<div class="quot"></div>
								<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum putamus parum.</p>
								<div class="head">
									<div class="head-icon">
										<div class="face">
											<i class="faceone"></i>
										</div>
									</div>
									<div class="head-icon">
										<div class="face">
											<i class="facetwo"></i>
											<p class="name">Britney Simpson<br/> Company Inc.</p>
										</div>
									</div>
									<div class="head-icon">
										<div class="face">
											<i class="facethree"></i>
										</div>
									</div>
								</div>
							</div>
							<div class="carousel-count" id="carousel-count">
								<div class="quot"></div>
								<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum putamus parum.</p>
								<div class="head">
									<div class="head-icon">
										<div class="face">
											<img src="img/pages_a.jpg" />
										</div>
									</div>
									<div class="head-icon">
										<div class="face">
											<img src="img/pages_b.jpg"/>
											<p class="name">Britney Simpson<br/> Company Inc.</p>
										</div>
									</div>
									<div class="head-icon">
										<div class="face">
											<img src="img/pages_c.jpg" />
										</div>
									</div>
								</div>
							</div>
							<div class="carousel-count" id="carousel-count">
								<div class="quot"></div>
								<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum putamus parum.</p>
								<div class="head">
									<div class="head-icon">
										<div class="face">
											<img src="img/pages_d.jpg" />
										</div>
									</div>
									<div class="head-icon">
										<div class="face">
											<img src="img/pages_e.jpg" />
											<p class="name">Britney Simpson<br/> Company Inc.</p>
										</div>
									</div>
									<div class="head-icon">
										<div class="face">
											<i class="facethree"></i>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="min-circle">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
				<div class="prev" id="prev">
					<i class="arrowleft"></i>
				</div>
				<div class="next" id="next">
					<i class="arrowright"></i>
				</div>
			</div>
			<!------------------------->
			<div class="part">
				<h1>Our Happy Clients</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh<br/> euismod tincidunt ut laoreet dolore magna aliquam. </p>
				<div class="titletext">
					<ul>
						<li><a href="" class="pra"></a></li>
						<li><a href="" class="flu"></a></li>
						<li><a href="" class="bon"></a></li>
						<li><a href="" class="spa"></a></li>
						<li><a href="" class="fra"></a></li>
						<li><a href="" class="bar"></a></li>
					</ul>
				</div>
				<div class="circle">
					<div class="min"></div>
					<div class="min"></div>
					<div class="min"></div>
					<div class="min"></div>
					<div class="min"></div>
				</div>
			</div>
		</section>
		
		<footer class="common-footer-wrapper">
			<div class="common-footer">
				<div class="common-footer-center">
					<div class="center-text">
						<span>Follow Us in Social Networks</span>
						<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
					</div>
					
					<ul class="center-menu">
						<li><img src="img/footer1.png"/></li>
						<li><img src="img/footer9.png"/></li>
						<li><img src="img/footer5.png"/></li>
						<li><img src="img/footer2.png"/></li>
						<li><img src="img/footer8.png"/></li>
						<li><img src="img/footer4.png"/></li>
						<li><img src="img/footer3.png"/></li>
						<li><img src="img/footer6.png"/></li>
					</ul>
				</div>
			</div>
			
			<div class="common-footer-bg">
				<div class="bg-text">
					<div class="text-left">
						<span>Twitter Widget</span>
						<div class="left-inner-top">
							<img src="img/footer7.png"/>
							<div class="inner-top-write">
								Mirum est <a href="">@global</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>6 MINUTES AGO</p>
							</div>
						</div>
						
						<div class="left-inner-bottom">
							<img src="img/footer7.png"/>
							<div class="inner-bottom-write">
								<a href="">@themefire</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>18 JUN 2015</p>
							</div>
						</div>
					</div>
					
					<div class="text-center">
						<span>Dribble Widget</span><br /><br />
						<div class="center-span">claritas est ynew trdhnm euy yebviumgd tyreuin oiywdw gyns ghbnh wikjsdhd</div>
						<ul class="center-img-item">
							<li><img src="img/footer11.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer13.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer12.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer15.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer14.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer16.jpg" width="139px" height="100px"/></li>
						</ul>
					</div>
					
					<div class="text-right">
						<span>Email Newsletters</span><br /><br />
						<div class="right-write">
							Sign Up our Newsletter to get latest updates and office subscribe to receive news in your inbox
						</div>
						<div class="right-email">
							Email Address
						</div>
						<div class="right-now">
							<a href="">Subscribe Now</a>
						</div>
					</div>
				</div>
			</div>
			
			<div class="common-footer-copyright">
				<div class="copyright-inner">
					<img src="img/footer-copyright.png" class="copyright-img"/>
					<div class="copyright-text">@2015 Design Studio <span>Globals</span> /Designed by <span>ThemeFire</span> / only for <span>Envato Market</span></div>
				</div>
			</div>
		</footer>
		
		<div class="return-top" onclick="returnTop()">
			<img src="img/returnTop.png" style="width: 70px;height: 70px;"/>
		</div>
		
		<script src="vendor/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/core.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			page.page();
		</script>
		
		<!-------------文字特效----------------->
		<script src="http://cdn.staticfile.org/jquery/1.9.0/jquery.min.js"></script>
		<script src="js/jquery.fittext.js"></script>
		<script src="js/jquery.lettering.js"></script>
		<script src="js/highlight.min.js"></script>
		<script src="js/jquery.textillate.js"></script>
		<script>
			hljs.initHighlightingOnLoad();
		</script>
		<script>
			$(function() {
				var log = function(msg) {
					return function() {
						if(console) console.log(msg);
					}
				}

				var animateClasses = 'flash bounce shake tada swing wobble pulse flip flipInX flipOutX flipInY flipOutY fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut';


				$('.jumbotron h1')
					.fitText(0.6)
					.textillate({ in: {
							effect: 'flipInY'
						}
					});

				$('.jumbotron p')
					.fitText(3.2, {
						maxFontSize: 18
					})
					.textillate({
						initialDelay: 1000,
						in: {
							delay: 3,
							shuffle: true
						}
					});

				setTimeout(function() {
					$('.fade').addClass('in');
				}, 250);

				setTimeout(function() {
					$('h1.glow').removeClass('in');
				}, 2000);
			});
		</script>
		<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
	</body>

</html>
